<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="keywords" content="camicroscope, quip" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />

    <script src="../../common/authChecker.js"></script>
    <script>
      __auth_check(2);
    </script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>

    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />
    <script src="../../core/Store.js"></script>

    <title>Batch Upload</title>
  </head>
  <body>
    <nav
      class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"
      style="position: sticky;"
    >
      <a href="../table.html">
        <i
          class="fas fa-arrow-left text-light"
          style="font-size: x-large; cursor: pointer;"
        ></i
      ></a>
      <div
        style="margin-left: 1em; font-size: x-large;"
        class="navbar-brand"
        href="#"
      >
        Batch Slides Upload
      </div>
    </nav>
    <div style="align-content: center; padding-top: 2em;">
      <form onsubmit="return false;">
        <div
          id="files"
          class="input-group mb-3"
          style="width: 25em; margin: 0 auto; display: none;"
        >
          <div class="custom-file">
            <input
              type="file"
              class="custom-file-input"
              id="filesInput"
              accept=".svs, .tif, .tiff, .vms, .vmu, .ndpi, .scn, .mrxs, .bif, .svslide"
              multiple
              required
            />
            <label
              id="filesInputLabel"
              class="custom-file-label"
              for="filesInput"
              >Choose files</label
            >
          </div>
        </div>

        <div id="filesDetails" style="display: none;">
          <div
            style="
              width: 23em;
              margin: 0 auto;
              display: flex;
              position: relative;
              left: 1.5em;
            "
          >
            <div
              class="input-group mb-3 fileName"
              style="width: 20em; opacity: 0.4;"
            >
              <div class="input-group-prepend">
                <span class="input-group-text">File Names</span>
              </div>
              <input
                type="text"
                id="fileNamesInput"
                class="form-control"
                placeholder="filename (w/o extension)"
                disabled
              />
            </div>
            <div
              id="fswitch"
              class="custom-control custom-switch"
              style="margin-left: 0.5em; padding-top: 0.3em;"
              title="Toggle to select a generalised file name"
            >
              <input
                type="checkbox"
                class="custom-control-input"
                id="fileNameSwitch"
              />
              <label class="custom-control-label" for="fileNameSwitch"></label>
            </div>
          </div>
          <div
            style="
              width: 25em;
              margin: 0 auto;
              display: flex;
              position: relative;
              left: 2em;
            "
          >
            <div class="input-group mb-3" style="width: 20em; margin: 0 auto;">
              <div class="input-group-prepend">
                <span class="input-group-text">Slide Names</span>
              </div>
              <input
                type="text"
                id="slideNamesInput"
                class="form-control"
                placeholder="Enter general sildename"
                required
              />
            </div>
            <div style="margin-left: 1.5em;">
              <button type="Submit" onclick="startTable()" class="btn btn-info">
                <i class="fas fa-arrow-right text-light"></i>
              </button>
            </div>
          </div>
          <div style="text-align: center;">
            <button
              id="start"
              onclick="startBatch()"
              class="btn btn-info"
              style="display: none;"
            >
              <i class="fas fa-upload"></i> Upload
            </button>
            <button
              id="finish"
              onclick="finishBatch()"
              class="btn btn-primary"
              style="display: none;"
            >
              Finish
            </button>
            <button
              id="check"
              onclick="checkBatch()"
              class="btn btn-secondary"
              style="display: none;"
            >
              Check
            </button>
            <button
              id="post"
              onclick="postBatch()"
              class="btn btn-success"
              style="display: none;"
            >
              Post
            </button>
          </div>
          <div id="complete" style="text-align: center; display: none;">
            <br />
            <i
              class="fas fa-check-circle text-success"
              style="font-size: 5em;"
            ></i>
            <br />
            <br />
            <a href="../table.html"
              ><button type="button" class="btn btn-primary">
                Go to slides
              </button></a
            >
          </div>
        </div>
      </form>
    </div>
    <div
      id="table"
      class="table-responsive-xl"
      style="
        margin-top: 2em;
        display: none;
        text-align: center;
        margin-bottom: 2em;
      "
    >
      <table
        class="table table-hover"
        style="
          margin: 0 auto;
          border-radius: 10px;
          min-width: 50em;
          max-width: 70em;
          cursor: default;
        "
      >
        <thead class="thead-light">
          <tr>
            <th scope="col">#</th>
            <th scope="col">File</th>
            <th scope="col">Slide</th>
            <th scope="col">Token</th>
            <th scope="col">Status</th>
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>

    <!--File Name change Modal -->
    <div
      class="modal fade"
      id="fileNameChangeModal"
      tabindex="-1"
      role="dialog"
      aria-hidden="true"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="fileNameChangeModalLabel">
              File name change
            </h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <form onsubmit="return false">
            <div class="modal-body" id="confirmUpdateFileContent"></div>
            <div class="modal-footer">
              <button
                type="button"
                class="btn btn-secondary"
                data-dismiss="modal"
              >
                Cancel
              </button>
              <button type="submit" id="confirmUpdateFile" class="btn btn-info">
                Update
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!--Slide Name change Modal -->
    <div
      class="modal fade"
      id="slideNameChangeModal"
      tabindex="-1"
      role="dialog"
      aria-hidden="true"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="slideNameChangeModalLabel">
              Slide name change
            </h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <form onsubmit="return false">
            <div class="modal-body" id="confirmUpdateSlideContent"></div>
            <div class="modal-footer">
              <button
                type="button"
                class="btn btn-secondary"
                data-dismiss="modal"
              >
                Cancel
              </button>
              <button
                type="submit"
                id="confirmUpdateSlide"
                class="btn btn-info"
              >
                Update
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!--Slide Information Modal -->
    <div
      class="modal fade"
      id="slideInfoModal"
      tabindex="-1"
      role="dialog"
      aria-hidden="true"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="slideInfoModalLabel">
              Slide Information
            </h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body" id="slideInfoContent"></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">
              Okay
            </button>
          </div>
        </div>
      </div>
    </div>

    <script src="./batchLoader.js"></script>
  </body>
</html>
